<template>
  <div class="order_main">
    <div class="title bold">{{ $t('loan.loanRecord') }}</div>
    <div class="nav_list flex-start">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/loan' }">{{ $t('loan.title') }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('loan.loanRecord') }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="order_tabs">
      <el-tabs v-model="tabsValue" @tab-click="tabsClick">
        <el-tab-pane :key="item.name" :label="item.label" v-for="item in tabsList" :name="item.name">
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="table-container">
      <ul class="my-table-header">
        <li class="table-cell">{{ $t('loan.loanAmount') }}</li>
        <li class="table-cell">{{ $t('loan.repayCycle') }}</li>
        <li class="table-cell">{{ $t('loan.dayRate') }}</li>
        <li class="table-cell">{{ $t('loan.interest') }}</li>
        <li class="table-cell">{{ $t('loan.repayWay') }}</li>
        <li class="table-cell">{{ $t('assets.status') }}</li>
        <li class="table-cell">{{ $t('loan.repayTime') }}</li>
        <li class="table-cell">{{ $t('loan.loanInstit') }}</li>
      </ul>
      <ul class="table-body">
        <li v-for="(row, rowIndex) in tableData" :key="rowIndex" class="table-row">
          <span :key="cellIndex" class="table-cell">{{ row.amount }}</span>
          <span :key="cellIndex" class="table-cell">{{ row.cycleType }}</span>
          <span :key="cellIndex" class="table-cell">{{ row.rate }}%</span>
          <span :key="cellIndex" class="table-cell">{{ formatAmount(row) }}</span>
          <span :key="cellIndex" class="table-cell">{{ row.repayTypeLabel }}</span>
          <span :key="cellIndex" class="table-cell">{{ formatStatus(row.status) }}</span>
          <span :key="cellIndex" class="table-cell"><span v-if="!(row.status === 0 || row.status === 2)">
              <{{ formatTimestampWithTimezone(row.params.finalRepayTime, "HH:mm MM/DD", true) }}</span>
            </span>
            <span :key="cellIndex" class="table-cell">{{ row.tloadProduct.repayOrg }}</span>

        </li>
      </ul>
      <el-empty v-if="!tableData.length" :description="$t('utils.noData')">
        <template #image>
          <img :src="require('@/assets/image/noData.png')" alt="Empty Image" />
        </template>
      </el-empty>
    </div>
  </div>
</template>

<script>
import {
  countFormat,
  priceFormat,
  _add,
  _sub,
  _div,
  _toFixed,
  _mul,
} from "@/util/decimal";
import { getLoanOrderList } from "@/api/loan";
//   import { redemption } from "@/api/pledge";
import { getRepayType } from "@/api/common";
export default {
  components: {},
  data() {
    return {
      tabsValue: "totol",
      tableData: [],
      dictList: [],
    };
  },
  computed: {
    formatAmount() {
      return function (item) {
        return _mul(_mul(_mul(item.amount, item.rate), item.cycleType), 0.01);
      };
    },
    formatStatus() {
      return function (e) {
        this.mineStatus = e;
        let statusText;
        if (e == 0) {
          statusText = this.$t('loan.pendingReview');
        } else if (e == 1) {
          statusText = this.$t('loan.reviewPass');
        } else if (e == 2) {
          statusText = this.$t('loan.reviewFail');
        } else if (e == 3) {
          statusText = this.$t('loan.settled');
        } else {
          statusText = this.$t('loan.overdue');
        }
        return statusText;
      };
    },
    tabsList() {
      return [
        {
          label: this.$t('loan.totol'),
          name: "totol",
        },
        {
          label: this.$t('loan.pendingReview'),
          name: "0",
        },
        {
          label: this.$t('loan.reviewPass'),
          name: "1",
        },
        {
          label: this.$t('loan.reviewFail'),
          name: "2",
        },
        {
          label: this.$t('loan.settled'),
          name: "3",
        },
        {
          label: this.$t('loan.overdue'),
          name: "4",
        },
      ];
    },
  },
  watch: {
    tableData(newValue) {
      newValue.forEach((item, index) => {
        this.dictList.forEach((itm, idx) => {
          if (item.tloadProduct.repayType == itm.dictValue) {
            item["repayTypeLabel"] = itm.dictLabel;
          }
        });
      });
    },
  },
  methods: {
    tabsClick(e) {
      this.tabsValue = e.name;
      const status = e.name == "totol" ? "" : e.name;
      this.getTableData(status);
    },
    getRepayType() {
      getRepayType({
        t_repay_type: "",
      }).then((res) => {
        if (res.data.code == 200) {
          this.dictList = res.data.data;
          this.getTableData();
        }
        //console.log("文章详情=====》", res.data.data[0]);
      });
    },
    getTableData(status) {
      getLoanOrderList({
        pageNum: 1,
        pageSize: 20,
        status,
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.rows;
          this.tableData.forEach((item, index) => {
            this.dictList.forEach((itm, idx) => {
              if (item.tloadProduct.repayType == itm.dictValue) {
                item["repayTypeLabel"] = itm.dictLabel;
              }
            });
          });
        }
      });
    },
    //   redeemOrder(id) {
    //     redemption({
    //       id,
    //     }).then((res) => {
    //       if (res.data.code == 200) {
    //         this.$message.success(res.data.msg);
    //         this.getTableData();
    //       }
    //     });
    //   },
  },
  created() { },
  mounted() {
    this.getRepayType();
    //   this.getTableData();
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.bold {
  font-weight: bold;
}

.order_main {
  width: 1200px;
  padding: 60px 0;

  margin: 50px auto;

  .title {
    width: 100%;
    height: 110px;
    color: #fff;
    //background: blueviolet;
    font-size: 36px;
    //   color: #000;

    border-bottom: 1px solid #2c2c3e;
  }

  .nav_list {
    height: 100px;

    ::v-deep .el-breadcrumb__item {
      font-size: 16px;

      .is-link {
        color: #fff;
        font-weight: bold;
      }
    }
  }

  .order_tabs {
    margin-top: 10px;

    ::v-deep .el-tabs {
      .el-tabs__item {
        font-size: 16px;
      }

      //   .el-tabs__active-bar {
      //     height: 3px;
      //   }
    }
  }

}

.table-container {
  width: 100%;
  overflow: auto;
  color: #fff;
}

.my-table-header,
.table-body {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.table-body {
  max-height: 250px;
  overflow-y: auto;
}

.my-table-header {
  flex-direction: row;
  height: 40px;
  line-height: 40;
  font-size: 14px;
  background-color: #0D0E0F;
}

.table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  border-bottom: 1px solid #2c2c3e;

  &:hover {
    background: #031D26;
  }
}

.table-cell {
  flex: 1;
  display: flex;
  white-space: nowrap;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 50px;
  font-size: 14px;

}
</style>
